<template>
    <component :color="color" v-if="isExternal" :is="iconName" v-bind="$attrs" :class="svgClass"/>
    <svg v-else v-bind="$attrs" :class="svgClass" aria-hidden="true">
        <use v-bind:xlink:href="iconName" :fill="color"/>
    </svg>
</template>

<script setup>


import {isObject} from "@vueuse/core";

const props = defineProps({
    iconClass: {
        type: [String, Object],
        required: true
    },
    className: {
        type: String,
        default: ''
    },
    color: {
        type: String,
        default: ''
    }
})

const iconName = computed(() => {
    return isExternal.value
            ? isObject(props.iconClass) ? props.iconClass : props.iconClass.slice(3)
            : `#icon-${props.iconClass}`
})
const svgClass = computed(() => {
    if (props.className) {
        return `svg-icon ${props.className}`
    }
    return 'svg-icon'
})
const isExternal = computed(() => isObject(props.iconClass) || props.iconClass.startsWith('el'))
</script>

<style scoped lang="scss">
.sub-el-icon,
.nav-icon {
    display: inline-block;
    font-size: 15px;
    margin-right: 12px;
    position: relative;
}

.svg-icon {
    width: 1em;
    height: 1em;
    position: relative;
    fill: currentColor;
    vertical-align: middle;
    display: inline-block;
    
}
</style>
